<template>
  <div class="Playing">
    <Playing :chapter="chapter" :items="items" v-if="chapter" :isListen="isListen" ref="Play" :cur_day="items.cur_day"
             :red_count="red_count"></Playing>
    <!--<Modify v-show="true"></Modify>-->
  </div>
</template>

<script>
  import Playing from '../../components/NewPlayings/index'

  export default {
    name: 'index',
    data: function () {
      return {
        data: this.$route.query,
        chapter: null,
        items: {},
        isListen: 1,
        red_count: 0,
      }
    },
    mounted: function () {
      this.update()
      this.read_task_callback({
        user_id: this.$Login.oauth_token.user_id,
        activity_id: this.$route.query.activity_id || 1
      })
    },
    methods: {
      update: function () {
        this.$axios.free(this.data).then(res => {
          this.chapter = res.data.qing_data.chapter
          this.items = res.data.qing_data
          // 如果有红包则传递给组件
          if (this.items.read_packet) {
            this.red_count = (this.items.read_packet) / 100
          }
          sessionStorage.setItem('handout', this.$Mate.qingReadTextRetuen(this.chapter.chapter_handout_text))
          // console.log(this.$refs.Play)
        })
      },
      read_task_callback: function (data) {
        this.$axios.read_task_callback(data).then(res => {
        })
      }
    },
    components: {Playing}
  }
</script>

<style scoped>
  @import "../../assets/css/views/Playing/index.css";
</style>
